<template>
  <div class="nav" @click="toUrl()">
    <img class="navImg" :src="data.img"  :alt="data.name"/>
    <p class="navP" :style="{ color: data.fontColor }">{{ data.name }}</p>
  </div>
</template>

<script>
export default {
  name: "atom",
  props: ["navData"],
  data() {
    return {
      data: this.navData,
    };
  },
  created: function () {},
  methods: {
    toUrl() {
      window.open(this.navData.link);
    },
  },
};
</script>

<style scoped>
.nav {
  cursor: pointer;
  text-align: center;
  width: 150px;
  float: left;
  margin: 35px 50px;
}
.navImg {
  width: 120px;
  height: 120px;
}
.navP {
  padding-top: 10px;
  text-shadow: 0 0 5px #3a3a3a;
  line-height: 16px;
  font-size: 16px;
}
@media screen and (max-width: 500px) {
  .nav {
    width: 70px;
    float: left;
    margin: 20px 8px;
  }
  .navImg {
    width: 50px;
    height: 50px;
  }
  .navP {
    padding-top: 2px;
    text-shadow: 0 0 5px #3a3a3a;
    line-height: 10px;
    font-size: 10px;
  }
}
</style>
